<template>
  <div class="page flex-column">
    <div class="page-title">
      <span class="location-part"><a href="/#/message/list">消息通知</a></span>
      <span class="location-split">/</span><span class="location-current">消息详情</span>
    </div>

    <!-- 消息详情 -->
    <div class="message-info">
      <div class="msg-name">{{ messageDetailObject.name }}</div>
      <div class="msg-time">{{ messageDetailObject.sendTime }}</div>
      <a-divider class="msg-divider"></a-divider>
      <div v-html="processLinks(messageDetailObject.content)" class="msg-content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue';
import { miscApi } from "@/services";

const messageDetailObject = ref({});

onBeforeMount(async () => {
  const messageJson = localStorage.getItem("messageDetail");
  if (!messageJson) return;

  messageDetailObject.value = JSON.parse(messageJson);

  await miscApi.traceViewPage("/message/detail");
});

/**
 * 处理详情页中的链接，添加target="_blank"
 */
const processLinks = (message) => {
  if (!message) return '';
  
  // 匹配<a>标签并添加target="_blank"
  return message.replace(/<a\s+href=/g, '<a target="_blank" href=')
                .replace(/<a\s+([^>]*)\s+href=/g, '<a $1 target="_blank" href=');
}
</script>

<style lang="less" scoped>
.page {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: @white-bg;

  .page-title {
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    padding: 20px 30px;

    .location-part {
      cursor: pointer;
    }

    .location-split {
      padding: 0 2px;
    }

    .location-part, .location-split {
      color: @font-grey-light;
    }

    .location-current {
      color: @font-black;
    }
  }

  .message-info {
    min-height: 900px;
    background-color: @white;
    border-radius: 20px;
    margin: 20px 30px 0 30px;
    padding: 25px 20px 35px 20px;
    display: flex;
    flex-direction: column;

    .msg-name {
      height: 36px;
      line-height: 36px;
      font-size: 24px;
      font-weight: 500;
      color: @font-black;
    }

    .msg-time {
      margin-top: 10px;

      height: 16px;
      line-height: 16px;
      font-size: 16px;
      font-weight: 400;
      color: @font-grey;
    }

    .msg-divider {
      margin: 30px 0 20px 0;
    }

    .msg-content {
      min-height: 706px;
      line-height: 26px;
      font-size: 16px;
      font-weight: 400;
      color: @font-black;

      :deep(a) {
        color: @text-link-color;
      }
    }
  }
}
</style>
